<template>
  <div class="header_bottom">
	<!-- 主页 -->
    <!-- bannar -->
       <banner></banner>
    <!-- 商品分类 -->
	<div class="head-con">
      <nav id="nav_" class="mui-bar-nav ">
        <div class="eco_two">
          <ul class="sw_li">
            <li v-for="(item,index) in navList" @click="toLink(item)" v-if="index<=8">
              <p><img :src="item.image_url" class="sli_img"></p>
              <p>{{item.name}}</p>
            </li>
            <li @click="toLinkFen()">
              <p><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/index/fenlei.png" class="sli_img1"></p>
              <p>全部分类</p>
            </li>
          </ul>
        </div>
      </nav>
    </div>
	
    <!--交易动态-->
     <cover></cover>
		 <!-- 底部 -->
     <appFooter :active="2"></appFooter>
  </div>
</template>

<script>
		import banner from '@/pages/nav/banner'
   import appFooter from '@/components/appFooter.vue'
   import cover from '@/pages/commodity/cover.vue'

export default {
  data () {
    return {
      navList:[],
    }
  },
  components: {
     cover,appFooter, banner
  },
  created:function () {
    this.$emit('public_footer',true);
    setTitle('搜了宝')
  },
  mounted(){
    this.getClassification()
  },
  methods:{
    //进入详情
//获取商品分类
    async getClassification() {
      let params = {
				
      };
      const res = await this.$axios.get(this.$api.navData, params);
      if (res.success) {
				console.log(res)
        this.navList = res.data;
      } else {
        this.$toast(res.msg);
      }
    },
    //根据商品分类id跳转详情
    toLink(item){
      this.$router.push({ name:'商品列表',query:{id:item.id,name:item.name}});
    },
    toLinkFen(){
      this.$router.push({ path:'/allCategories'});
    },
  }

}
</script>


<style scoped>
  @import '../../assets/css/index.css';
  .header_bottom{
    text-align: center;
    width: 100%;
    margin: auto;
    height: auto;
    overflow: hidden;
    background-color: #f7f7f7;

  }


</style>
